<%@page import="com.dao.CateDao"%>
<%@page import="com.beans.Cateinfo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%List<Cateinfo> cateLists=new CateDao().getAllCates(); 
	request.setAttribute("cateLists",cateLists);%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"> 
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/maintable.css" > 
<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
	$(function(){
		if('${param.bigCateId}'!=""){
			$("#select1").val('${param.bigCateId}');
			$("#select2").empty();
			var pId=$("#select1").val();
			if(pId=="-1"){
				$("#select2").append("<option value='-1'>小分类</option>");
			}
			<c:forEach var="m" items="${cateLists }">
			if('${m.id}'==$('#select1 option:selected').val()){
				<c:forEach var="n" items="${m.cateinfos }">
				var str="<option value='${n.id}'>${n.cateName}</option>" ;
				$("#select2").append(str);
				</c:forEach>
			};
		</c:forEach>						
		}
		$("#select1").change(function(){
			$("#select2").empty();
			var pId=this.value;
			if(pId=="-1"){
				$("#select2").append("<option value='-1'>小分类</option>");
			}
			<c:forEach var="m" items="${cateLists }">
				if('${m.id}'==$('#select1 option:selected').val()){
					<c:forEach var="n" items="${m.cateinfos }">
					var str="<option value='${n.id}'>${n.cateName}</option>" ;
					$("#select2").append(str);
					</c:forEach>
				};
			</c:forEach>			
		});
		$("#div_goods_detail").hide();
		
		$("#select2").val('${param.smallCateId}');
		$("#ch_checkall,#top_ch_checkall").click(function(){
			if(this.checked){
				$("input[name=ck_id]").attr("checked","checked");
			}else{
				$("input[name=ck_id]").removeAttr("checked");
			}		
		});
		
		$("table tr").mouseover(function(){
			$(this).css("background","#D3EAEF");
			$(this).siblings().css("background","white");
		});
		
		$("#deleteAll").on('click',function (){
			var beat=false;
			$("input[name=ck_id]").each(function(){
				if(this.checked){beat=true;}
			})
			
			if(beat){
				$("#deleteAll").attr("name","deleteAll");
				$("#pageIndex0").attr("name","pageIndex");
				$('form[name=form1]').submit();
				}
			});
		
		});
		
	 	//根据已有元素,取得它的坐标
		function showDetails(item, goodsId, desc) {
		  //得到超链接的坐标
			var position = getElemPos(item);
			$("#div_goods_detail").css("left", position.x - 150).css("top",	position.y);
			$("#div_goods_detail").show();

		//$("#goods_picture").attr("src","${pageContext.request.contextPath}/goods/picture.jsp?goodsId="+goodsId);
		
			$("#goods_picture").attr("src","${pageContext.request.contextPath}/GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
			$("#div_imgdesc").html("<center>" + desc + "</center>");
		};
		
		function getElemPos(obj) {
			var pos = {
				"top" : 0,
				"left" : 0
			};
			if (obj.offsetParent) {
				while (obj.offsetParent) {
					pos.top += obj.offsetTop;
					pos.left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			} else if (obj.x) {
				pos.left += obj.x;
			} else if (obj.x) {
				pos.top += obj.y;
			}
			person=new Object();
			person.x=pos.left;
			person.y=pos.top;
			return  person;
		}

	function hideDetails(){
		$("#div_goods_detail").hide();
	}
	
	function inputnumber(e) {
        e.value = (e.value.replace(/[^\d]/g, ''))
    }
</script>

</head>
<body>
<form action="GoodsServlet.do"  id="loginForm" method="get" > 
	<input type="hidden" name="flag" value="manage">
<div class ="div_title">
	<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品管理</span></div>
	<div class="div_titleoper">
		<input type="checkbox" id="top_ch_checkall"/> 全选 <a href="goods/goods_add.jsp"> <img src="images/add.gif"/>添加 </a> <a href="javascript:void(0)" id="deleteAll"><img src="images/del.gif"/>删除</a> 
	</div>
</div>
<table class="main_table" >
	<caption >
	<select id="select1" name="bigCateId">
			   <option value="-1">大分类</option>
				<c:forEach var="m" items="${cateLists }">
					<option value="${ m.id}">${ m.cateName}</option>
				</c:forEach>
			</select>
			&ensp;
			<select id="select2" name="smallCateId">
			   <option value="-1">小分类</option>
			</select>
			&ensp;
			商品名称:
			<input type="text" class="txtbox" id="goodsName" name="goodsName" value="${param.goodsName }"/> &ensp;
			<button onclick="pageIndexs('1');">查询</button>
	</caption>
	<tr>
		<th><input type="checkbox" id="ch_checkall" /></th>	<th>名称</th> 	<th>单位</th>	<th>单价</th>  <th>大分类</th> <th>小分类</th>	<th>操作</th>
	</tr>
	<form action="GoodsServlet.do"  name="form1" method="post" >
	<input type="hidden" name="flag" value="deleteAll" id="deleteAll">
	<input type="hidden" name="pageIndex" value="${page.pageIndex}" id="pageIndex0">
	<c:forEach var="a" items="${goodsList }" varStatus="st">
	<tr>
		<td>
			<input type="checkbox" name="ck_id" value="${a.id}" /> 
		</td>
		<td>
			${a.goodsName }
		</td>
		<td>
			${a.unit }
		</td>
		<td>
			${a.price }
		</td>
		<td>
			${a.bigCateName }
		</td>
		<td>
			${a.smallCateName }
		</td>
		<td>
			<a href="javascript:void(0)" onmouseover="showDetails(this,'${a.id }','${a.des }')" onmouseout="hideDetails()" >查看</a> | 
			<a href="GoodsServlet.do?flag=edit&amp;pageIndex=${page.pageIndex}&amp;id=${a.id}">修改</a> | 
			<a href="GoodsServlet.do?flag=delete&amp;pageIndex=${page.pageIndex}&amp;id=${a.id}">删除</a>
		</td>
	</tr>
	</c:forEach>
	</form>
</table>
	
	<div class="div_page" >
		<div class="div_page_left"> 共有 <label>${page.rowCount }</label> 条记录，当前第 <label>${page.pageIndex }</label> 页，共 <label>${page.pageCount }</label> 页	</div>		
		<div class="div_page_right" > 	

			<c:choose>
				<c:when test="${page.hasPre }">
					<a href="javascript:pageIndexs('1')">&nbsp;首页</a>
					<a href="javascript:pageIndexs('${page.pageIndex-1 }')">&nbsp;上一页</a>  
				</c:when>
				<c:otherwise>
					&nbsp;首页
					&nbsp;上一页
				</c:otherwise>
			</c:choose>
			
			<c:choose>
				<c:when test="${page.hasNext }">
					<a href="javascript:pageIndexs('${page.pageIndex+1 }')">&nbsp;下一页</a>
					<a href="javascript:pageIndexs('${page.pageCount }')">&nbsp;尾页</a>
				</c:when>
				<c:otherwise>
					&nbsp;下一页
					&nbsp;尾页
				</c:otherwise>
			</c:choose>

			<button onclick="pageIndexes();">转到&nbsp;&nbsp;</button>
			<input type="text" name="pageIndex" id="pageIndex" value="${page.pageIndex}" oninput="inputnumber(this)"/> &nbsp;页
			
		</div>			
	</div>
</form>
<div id="div_goods_detail" style="width: 142px;position:fixed;">
	<img id="goods_picture" width="140" height="190" /><br>
	<div id="div_imgdesc" style="background-color: yellow;"></div>
</div>
<script >
function pageIndexs(page) {
	$("#deleteAll").attr("name","");
	$("#pageIndex0").attr("name","");
	$("#pageIndex").attr("value",page);
	$('#loginForm').submit();	
}
function pageIndexes() {
	$("#deleteAll").attr("name","");
	$("#pageIndex0").attr("name","");
	$('#loginForm').submit();	
}
</script>
</body>
</html>